<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css">
    <title>设置</title>
    <style>
        * {
            margin: 0px;
            /* font-family: 'Comic Sans MS', cursive, sans-serif; */
            /* font-family: 'Comic Sans MS', cursive, sans-serif, "微软雅黑"; */
            font-family: "Source Code Pro", Consolas, Menlo, Monaco, "Courier New", monospace, "微软雅黑";
            color: #123456;
            box-sizing: border-box;
            word-break: break-all;
        }
    </style>
</head>

<body>
    <div id='main' style="margin: 20px;">
        <div class="block">
            <span class="demonstration">相似度 {{config.colorOffset}}/1000</span>
            <el-slider @change="onChange" v-model="config.colorOffset" :max=1000 size=mini></el-slider>
        </div>
        <div class="block">
            <span class="demonstration">平滑度 {{config.smoothValue}}/1000</span>
            <el-slider @change="onChange" :max=1000 v-model="config.smoothValue"></el-slider>
        </div>
        <div class="block">
            <span class="demonstration">透明度 {{config.transparency}}/100</span>
            <el-slider @change="onChange" v-model="config.transparency"></el-slider>
        </div>
        <el-radio-group v-model="config.isLeft">
            <el-radio :label="true">居左</el-radio>
            <el-radio :label="false">居右</el-radio>
        </el-radio-group>
        <div class="block">
            <span class="demonstration">水平偏移 {{config.xOffset + 'px'}}</span>
            <el-slider @change="onChange" :marks='{0:"0px"}' :max=500 :min=-500 v-model="config.xOffset"></el-slider>
        </div>
        <div class="block">
            <span class="demonstration">帧数 {{fps + 'fps'}}</span>
            <el-slider @change="onFpsChange" :marks='{30:"30"}' :max=60 :min=5 v-model="fps"></el-slider>
        </div>

        <br>
        <div class="block">
            <span class="demonstration">facerig虚拟摄像头设备名<br>
                <span style="font-size:12px">
                    (默认为FaceRig Virtual Camera,有的电脑上可能不叫这个名字)</span>
            </span>
            <br>
            <el-select style='width: 350px;' @change="onCameraChange" v-model="camera" size="mini" placeholder="选择摄像头">
                <el-option :value='c' v-for="c in cameras">
                </el-option>
            </el-select>
        </div>
    </div>
    <script src="config.js"></script>
</body>

</html>